使用JavaScript控制行為

JavaScript 基本語法

• 語句 (statement) 和註釋
  JavaScript 執行單位為行，也就是一行一行執行。
  一般情況下，每一行就是一個語句。

  var a = 1 + 3;
  // 單行註釋
  /*
   多行
   註釋
  */
  <!-- 和 --> 也是單行註釋
  x = 1; <!-- x = 2;
  --> x = 3;
  

• 變數和數據類型

  • 聲明和賦值

    var a = 1;
    

  • 簡單數據類型和復雜數據類型
    簡單

    • 布林 (Boolean)：：true 和 false。
    • 數值 (Number)：整數或帶有小數點的數字。
    • 字串 (String)：沒有 （字元），只有字串。字串會用' '或 " "包夾。
    • 空值 (null)：代表（此變數可能曾經有值或沒有值）現在沒有值。
    • 未定義 (undefined)：代表（此變數）還沒有給值，所以不知道是什麼。

    復雜

    • 陣列 (Array)
    • 物件 (Object)

  • 變數的命名規則
    變數的第一個字母必須為英文字母、底線 _ 或錢字號 $ ，後面可以是英文字母、底線 _ 或是錢字號 $ 以及數字。變數名稱不可以是保留字 (Reserved Words) 與關鍵字 (keyword)。

• 表達式和運算符

  • 表達式：由數字、運算符、分組符號、變數和常數等以能求得數值的有意義排列方法所得的組合。一個表達式會產生一個值，它可以放在任何需要一個值的地方。
  • 賦值運算符：最簡單的賦值運算符是等於 (=)，使左方運算元與右方運算元相同之值。也就是 x = y 會把 y 的值賦予給 x。
    還有一些複合運算符
    
  • 算術運算符：最常見的算術運算符是加法 (+)，減法 (-)，乘法 (*)，及除法 (/)。
    
  • 比較運算符：比較運算符並基於比較的結果回傳邏輯值。
    
  • 邏輯運算符：將運算元當作 32 位元的集合來看待 (0 和 1)
    

• 分支結構

  • if... else...

  if (m == 3)
  m = m + 1;
  // 或
  if (m == 3) {
    m += 1;
  }
  
  if (m === 0) {
    // ...
  } else if (m == 1) {
    // ...
  } else {
    // ...
  }
  

  • switch... case... default...

  switch (fruit) {
    case "banana":
      // ...
      break;
    case "apple":
      // ...
      break;
    default:
      // ...
  }
  

• 循環結構

  • for 循環

  var x = 3;
  for (var i = 0; i < x; i++) {
    console.log(i);
  }
  

  • while 循環

  var i = 0;
  
  while (i < 100) {
    console.log('i 為：' + i);
    i = i + 1;
  }
  

  • do... while 循環

  var x = 3;
  var i = 0;
  
  do {
    console.log(i);
    i++;
  } while(i < x);
  

• 陣列 (Array)

  • 創建陣列

  var colors = ["Red", "Green", "Blue"];
  var colors = new Array("Red", "Green", "Blue");
  var colors = Array("Red", "Green", "Blue");
  

  • 操作陣列中的元素

  var colors = []; // 空陣列
  print(colors.length); // 0
  
  colors[0] = 'Red';
  colors[1] = 'Green';
  colors[2] = 'Blue';
  print(colors.length); // 3
  

• 函數

  • 定義函數
  • 調用函數
  • 參數和返回值
  • 匿名函數
  • 立即調用函數

  // 定義函數
  function square(number) {  // number 參數
    return number * number;  // 返回值
  }
  var x = square(10);   // 調用函數
  

  funcC();   // 使用 funcC
  function funcC(){}  // 宣告一個 function 叫做 funcC （匿名函數）
  

  (function(a){
      console.log(a);   //firebug 輸出 123，使用()
  })(123);
  
  (function(a){
      console.log(a);   //firebug 輸出 1234，使用()
  }(1234));
  
  

物件導向

• 物件的概念：物件是一批相關的數據或功能，通常包含幾個變數及函式，當它們包含在物件中時被稱做屬性 (properties) 或函式 (methods)。
• 創建物件的字面量語法
• 訪問成員運算符
• 創建物件的構造函數語法
  • this 關鍵字：指目前寫入程式碼的物件。
• 添加和刪除屬性
  • delete 關鍵字

var person = {
  name : ['Andy', 'Smith'],          # 屬性 (properties)
  age : 32,
  gender : 'male',
  interests : ['music', 'singing'],
  bio : function() {                 # 函數 (methods)
    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  },                                 # this 等於 person
  greeting: function() {
    alert('Hi! I\'m ' + this.name[0] + '.');
  }
}
# 訪問 點記法 (Dot notation)
person.name[0]
person.age
person.interests[1]
person.bio()
person.greeting()
# 訪問 括弧記法 (Bracket notation)
person['age']
person['name']['first']
# 可以直接添加屬性
person['eyes'] = 'hazel'
person.farewell = function() { alert("Bye everybody!") }
# 刪除屬性
delete person.eyes

• 標準內建物件：根據標準在全域性作用域 (Global) 上存在的物件。
  • Number / String / Boolean / Symbol / Array / Function
  • Date / Error / Math / RegEx / Object / Map / Set
  • JSON / Promise / Generator / Reflect / Proxy

BOM

BOM (Browser Object Model，瀏覽器物件模型)：是瀏覽器所有功能的核心，與網頁的內容無關， 主要處理瀏覽器視窗和框架。

• window 物件的屬性和方法
  window 物件表示瀏覽器開啟的視窗、標籤或框架，使用不須經過宣告，可以直接使用。
  window 物件屬性：document、history、location、navigator、screen、frames。
  window 的方法有很多，如alert() 跳出一個警告訊息窗、blur() 移除該視窗焦點等。
• history 物件：可對當前頁的瀏覽歷史進行操作。
  • forward() 載入 history 列表中的下一個 URL / back() 載入 history 列表中的前一個 URL / go() 載入 history 列表中的某個具體頁面
• location 物件：可對當前頁面的 URL 進行操作。如導航到新的頁面、獲取 URL 資訊等。
• navigator 物件：瀏覽器資訊。如瀏覽器名稱、版本資訊、作業系統平臺資訊等。
• screen 物件：螢幕資訊。如螢幕高度、寬度等。

DOM

DOM (Document Object Model，文件物件模型) ： 是一個以樹狀結構來表示 HTML 文件的模型。

• DOM 樹
  

以下都是 DOM 中的方法，但是不僅有這些，所以有興趣的可以看看這篇 HTML DOM 教學

• 訪問元素
  • getElementById() / querySelector()
  • getElementsByClassName() / getElementsByTagName() / querySelectorAll()
  • parentNode / previousSibling / nextSibling / children / firstChild / lastChild
• 操作元素
  • nodeValue
  • innerHTML / textContent / createElement() / createTextNode() / appendChild() / insertBefore() / removeChild()
  • className / id / hasAttribute() / getAttribute() / setAttribute() / removeAttribute()
• 事件處理
  • 事件類型
    • UI 事件：load / unload / error / resize / scroll
    • 鍵盤事件：keydown / keyup / keypress
    • 鼠標事件：click / dbclick / mousedown / mouseup / mousemove / mouseover / mouseout
    • 焦點事件：focus / blur
    • 表單事件：input / change / submit / reset / cut / copy / paste / select
• 事件綁定
  • HTML 事件處理程序
  • 傳統的 DOM 事件處理程序
  • 事件監聽器（舊的瀏覽器中不被支持）
• 事件流：事件捕獲 / 事件冒泡
• 事件對象（低版本 IE 中的 window.event）
  • target（有些瀏覽器使用 srcElement）
  • type
  • cancelable
  • preventDefault()
  • stopPropagation()（低版本 IE 中的 cancelBubble）
• 鼠標事件 - 事件發生的位置
  • 屏幕位置：screenX 和 screenY
  • 頁面位置：pageX 和 pageY
  • 客戶端位置：clientX 和 clientY
• 鍵盤事件 - 哪個鍵被按下
  • keyCode 屬性（有些瀏覽器使用 which）
  • String.fromCharCode(event.keyCode)
• HTML5 事件
  • DOMContentLoaded
  • hashchange
  • beforeunload

JavaScript API

• 客戶端存儲 - localStorage 和 sessionStorage
  • localStorage 始終有效，視窗或瀏覽器關閉也一直儲存，因此用作持久資料。
  • sessionStorage 僅在當前瀏覽器視窗關閉前有效，自然也就不可能持久保持。

localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');

• 獲取位置信息 - geolocation

navigator.geolocation.getCurrentPosition(function(pos) { 		  
    console.log(pos.coords.latitude)
    console.log(pos.coords.longitude)
})

• 從服務器獲取數據 - Fetch API
• 繪製圖形 - canvas API
• 音視頻 - audio 和 video API